<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的基础语法</title>
    <!-- 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 一定要记得引入vue.js文件 -->
    <div class="box">
        <!-- 双大括号表达式 又叫 mustache语法  作用：显示data数据    mustache语法即可以写表达式，也可以写变量！ -->
        <h1>{{name}}</h1>
        <h1>{{flag?msgY:msgN}}</h1>
    </div>
    <script>
        let data = {//data对象中的所有属性都加入到vue响应系统中，值一更改，视图也会发生改变；
                name:'小明',
                age:20,
                flag:true,
                msgY:'我好冷！',
                msgN:"我不冷！"
            };
        //冻结对象 阻断数据响应
        Object.freeze(data);
        //创建 构造函数 vue 的实例对象 
        let vm = new Vue({//配置对象
            el:'.box',//el中 规定在哪个元素中 运用em语法
            data
        });
        // vm.name = '小宏';//当data对象中的数据的值发生改变时，视图也会发生改变
        // vm.name = '小红';// 阻断数据响应后 data中的值不能更改，会报错！
    </script>
</body>
</html>